<template>
    <div class="layout-page">
        <header class="header" ref="headerRef">
            <div class="content">
                <nav @click="() => router.push('/')"><img src="@/assets/svg/nav-home.svg" alt=""> 首页</nav>
                <nav @click="() => router.push('/essay')"> <img src="@/assets/svg/nav-note.svg" alt="">随笔</nav>
                <nav @click="() => router.push('/gallery')"><img src="@/assets/svg/nav-photo.svg" alt=""> 相册</nav>
                <nav @click="() => router.push('/about')"><img src="@/assets/svg/nav-about.svg" alt=""> 关于我</nav>
            </div>
        </header>
        <main class="main">
            <NuxtPage />
        </main>
        <footer>
              <p>本网站部分内容来源于网络,仅供大家学习与参考</p>
              <p>本网站一切内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责</p>
              <p>如无意中侵犯某个企业或个人的知识产权,请联系作者(邮箱:admin@qq.com),本网站将立即给予删除</p>
        </footer>
    </div>
</template>
<script setup>

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/all'
gsap.registerPlugin(ScrollTrigger)
const headerRef = ref(null)

const router = useRouter()

onMounted(() => {
    ScrollTrigger.create({
        trigger: ".layout-page",
        start: 'top top',
        end: '100px',
        onEnter: () => {
            gsap.to(headerRef.value, {
                duration: 0,
                backgroundColor: '#28b9be',
                overwrite: 'auto'
            })
        },
        onLeaveBack: () => {
            gsap.to(headerRef.value, {
                duration: 0,
                backgroundColor: 'transparent',
                overwrite: 'auto'
            })
        }
    })
})

</script>

<style lang="less" scoped>
.layout-page {
    width: 100%;
    background: @color1;
    min-height: 100vh;

    .header {
        position: fixed;
        width: 100%;
        height: 60px;
        z-index: 9999;
        display: flex;
        background: transparent;
        justify-content: center;

        .content {
            max-width: 1140px;
            display: flex;
            justify-content: center;
            gap: 50px;
            align-items: center;

            nav {
                display: flex;
                align-items: center;
                color: @white;
                gap: 10px;
                cursor: pointer;

                img {
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }

    .main {
        margin: 0 auto;
    }

    footer {

        padding: 30px 0;
        box-sizing: border-box;
        background: @primary;
        display: flex;
        flex-direction: column;
        gap:10px;
        align-items: center;
        height: 150px;
    }
}
</style>